<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/myjs.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
        .form-control {
            width: 150px;
            display: inline-block;
        }

        .big {
            width: 300px;
        }

        #result {
            color: gray;
            float: right;
        }

        .showCount {
            color: red;
            font-size: 20px;
            font-weight: bold;
        }
        .table tr{
            text-align: center;
        }
        #bookDetail td{
            vertical-align: middle;
            text-align: left;
        }
    </style>
</head>
<body>
<div>
    <form id="queryForm">
        <table class="table">
            <tr>
                <td>
                    籍贯：<input name="grand" id="grand" class="form-control">
                    &nbsp;&nbsp;朝代：<input name="dynName" id="dynName" class="form-control">
                </td>
                <td>
                    &nbsp;&nbsp;姓、名、字：<input name="docName" id="docName" class="form-control">
                    &nbsp;&nbsp;著作：<input name="bookName" id="bookName" class="form-control big">
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;&nbsp;简介：<input name="introduce" id="introduce" class="form-control big">
                </td>
                <td>
                    &nbsp;&nbsp;备注：<input name="memo" id="memo" class="form-control big">
                    <input type="button" id="btnQuery" class="btn btn-primary" value="查询">
                </td>
            </tr>
        </table>
    </form>
    <div id="result">本次查询共<span class="showCount" id="pageCount"></span>页，
        <span class="showCount" id="listCount"></span>条记录
    </div>
</div>
<table class="table table-hover">
    <tr class="table-active">
        <td>编号</td>
        <td>作者</td>
        <td>书名</td>
        <td>朝代</td>
        <td>省份</td>
        <td>城市</td>
        <td>县</td>
        <td>册数</td>
        <td>出版年份</td>
        <td>操作</td>
    </tr>
    <tbody id="tbdoc"></tbody>
</table>
<nav aria-label="Page navigation example">
    <ul class="pagination"></ul>
</nav>
<!--js代码-->
<script>
    $(function() {
        $("#btnQuery").on("click", function() {
            findBook(1, 8);
        })
    })

    function findBook(page, size) {
        $.get(
            '/book/findBook',
            $("#queryForm").serialize() + "&page=" + page + "&size=" + size,
            function(pageInfo) {
                let tb = $("#tbdoc");
                tb.empty();
                let blist = pageInfo.list;
                for (let i in blist) {
                    let tr = `<tr>
                                   <td>${blist[i].bookId} </td>
                                   <td>${blist[i].docName} </td>
                                   <td>${blist[i].bookName} </td>
                                   <td>${blist[i].dynName} </td>
                                   <td>${blist[i].provName} </td>
                                   <td>${blist[i].city}</td>
                                   <td>${blist[i].county} </td>
                                   <td>${blist[i].volume} </td>
                                   <td>${blist[i].pubYear} </td>
                                    <td><button type="button" onclick="findBookById(${blist[i].bookId})"
                                    class="btn btn-primary btn-sm" data-toggle="modal" data-target="#docModal">修改</button>
                                    <button type="button" onclick="findBookInfo(${blist[i].bookId})"
                                    class="btn btn-primary btn-sm" data-toggle="modal" data-target="#bookModal">详情</button>
                                    </td>
                                </tr>`;
                    tb.append(tr);
                }
                let liFirst = pageInfo.isFirstPage ? "" :
                    `<li class="page-item"><a class="page-link" href="javascript:findBook(${page-1},${size})">上一页</a></li>`;
                let li = "";
                for (let i in pageInfo.navigatepageNums) {
                    let pn = pageInfo.navigatepageNums[i];
                    li +=
                        `<li class="page-item"><a class="page-link" href="javascript:findBook(${pn},${size})">${pn}</a></li>`
                }
                let liLast = pageInfo.isLastPage ? "" :
                    `<li class="page-item"><a class="page-link" href="javascript:findBook(${page+1},${size})">下一页</a></li>`;
                $(".pagination").empty();
                $(".pagination").append(liFirst + li + liLast);
                $("#pageCount").html(pageInfo.pages);
                $("#listCount").html(pageInfo.total);
            }, 'json'
        );
    }

    function findBookById(mid) {
        $.get(
            '/book/findBookById', {
                bookId: mid
            },
            function(book) {
                console.log('book',book);
                let info=book.dynName+'-'+book.provName+','+book.city+','+book.county+':'+book.docName;
                addFormData("updateBookForm", book);
                $("#docInfo").html(info);
            }, 'json'
        );
    }

    function updateBook() {
        $.post(
            '/book/updateBook',
            $("#updateBookForm").serialize(),
            function(num) {
                findBook(1, 8);
            },
            'json'
        );
    }

    function findBookInfo(bid){
        $.get(
            '/book/findBookById', {
                bookId: bid
            },
            function(book) {
                let info=book.dynName+'-'+book.provName+','+book.city+','+book.county+':'+book.docName+"《"+book.bookName+"》";
                $("#bookInfo").html(info);
                $("#bookIntro").html(book.introduce);
                $("#bookMemo").html(book.memo);
            }, 'json'
        );
    }
</script>
<!-- 修改Modal -->
<div class="modal fade" id="docModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">医籍修改</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="docInfo"></div>
                <form id="updateBookForm" method="post">
                    <input type="hidden" name="docId">
                    <input type="hidden" name="bookId">
                    <table class="table table-hover">
                        <tr>
                            <td>医家姓名：</td><td>书名：</td><td>出版年份：</td><td>册数：</td>
                        </tr>
                        <tr>
                            <td> <input type="text" name="docName" class="form-control" readonly></td>
                            <td> <input name="bookName" class="form-control"> </td>
                            <td> <input type="text" name="pubYear" class="form-control"></td>
                            <td> <input type="number" name="volume" class="form-control"></td>
                        </tr>
                        <tr>
                            <td  colspan="2">简介：</td>
                            <td  colspan="2">备注：</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <textarea rows="8" cols="40" name="introduce" ></textarea>
                            </td>
                            <td colspan="2">
                                <textarea rows="8" cols="40" name="memo"></textarea>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" onclick="updateBook()" class="btn btn-primary" data-dismiss="modal">医籍修改</button>
            </div>
        </div>
    </div>
</div>
<!--详情modal-->

<div class="modal fade" id="bookModal" tabindex="-1" aria-labelledby="bookModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bookModalLabel">医籍介绍</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table" id="bookDetail">
                    <tr>
                        <td width="30px">医籍</td>
                        <td><div id="bookInfo"></div></td>
                    </tr>
                    <tr>
                        <td>简介</td>
                        <td><div id="bookIntro"></div></td>
                    </tr>
                    <tr>
                        <td>备注</td>
                        <td><div id="bookMemo"></div></td>
                    </tr>
                </table>



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>